<!--suppress TypeScriptUnresolvedVariable -->
<template>
  <div class="PermissionManage">
    <Layout :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
      <content>

        <Row>
          <Col span="22">&nbsp;</Col>
          <Col span="2">
            <Button v-if="isButtonDisable" @click="updateRolePermission" type="primary" >保存设置</Button>
            <Button v-if="!isButtonDisable" type="primary" disabled>保存设置</Button>
          </Col>
        </Row>
        <Table :columns="columns" :data="dataList" border show-summary>

            <template v-if="permissionValues.length > 0"  v-for="(value, indexColums) in columns" slot-scope="{ row, indexRow }" :slot="value.slot">

                <Checkbox @on-change="equalTwoArray" v-model="permissionValues[indexColums-1][row._index].hasPermission" border></Checkbox>

            </template>

        </Table>
      </content>
      <footer>
        <template>
          <Page :total="pageInfoResponse.total" @on-change="getResourceList" :page-size="pageInfoRequest.pageSize" />
        </template>
      </footer>
    </Layout>
  </div>

</template>

<script lang="ts">

  import {Component, Vue,Watch} from 'vue-property-decorator'
  import {ceSecurityRolePermissionUrl, updateBatchRolePermissionListUrl,ceSecurityPermissionUrl} from "@/common/HttpRequestUrl";
  @Component
  export default class PermissionManage extends Vue {

    //  权限选择框数据结果集
    permissionValues = []
    permissionValuesTem = []
    isButtonDisable = false
    //  表头数据
    columns = [
                {
                  title:  '角色名称',
                  key:  'name',
                  align: 'center',
                  slot:null
                }
              ]
    //  表格数据体
    dataList= []

    mounted () {
      this.getColumsAndListAndAss()
    }
    // ================================================================后端交互以及获取数据及页面数值初始化================================================================
    //  得到表头数据
    async getColums () {

        let thisObj = this
        // 获取所有权限并转化数据格式
        await this.axios.get(ceSecurityPermissionUrl).then(function (res) {

          res.data.data.forEach(o => {
            let columnO = {title:o.name,slot:o.id+'',align:'center',key:null}

            // noinspection TypeScriptValidateTypes
            thisObj.columns.push(columnO)
          })
        })
      return thisObj.columns
    }

    //  分页请求参数参数
    pageInfoRequest = {
      total : 0, //  数据总条数
      pageSize : 8,  //  每页的数据条数
      pageNum : 1 //  当前页数
    }
    //  分页返回参数
    pageInfoResponse = {}

    //  查询分页数据
    async getResourceList ( pageNum, pageSize ) {

      if ( pageNum != null ) {
        this.pageInfoRequest.pageNum = pageNum
      }
      if ( pageSize != null ) {
        this.pageInfoRequest.pageSize = pageSize
      }
      let objThis = this
      await this.$post(ceSecurityRolePermissionUrl,{pageNum:this.pageInfoRequest.pageNum,pageSize:this.pageInfoRequest.pageSize}).then(function (res) {

        if (res.status) {
          objThis.pageInfoResponse = res.data

          //  角色权限数据转换
          res.data.list.forEach(o=>{
            let dataO = {
              name: o.roleName,
              id: o.roleId
            }
            o.ceSecurityPermissions.forEach(o1=>{
              dataO[o1.id+''] = o1.name
            })
            objThis.dataList.push(dataO)
          })
        }
      })

      return objThis.dataList
    }

    /**
     * 初始化表头和表数据并将初始化参数数值
     */
    getColumsAndListAndAss () {
      let thisObj = this
      //  初始化表头
      this.getColums().then(function (res) {

        //  初始化列表数据
        thisObj.getResourceList(thisObj.pageInfoRequest.pageNum,thisObj.pageInfoRequest.pageSize).then(function (res2) {

          //  循环表头与表数据初始化映射数据
          thisObj.columns.forEach((valueColums,indexColums) => {

            let dataColums = []
            let dataColums2 = []
            if ( indexColums > 0 ) {

              thisObj.dataList.forEach((valueRow, indexRow) => {

                //  将列数据的键取出来跟行比对获取映射到的值
                let keyValue = thisObj.isExistColumnFormData(valueRow,valueColums.slot)

                let data = {roleId:valueRow.id}
                let data2 = {roleId:valueRow.id}
                //  将比对后的结果放到映射数据集里面去
                if ( keyValue != null ) {
                  data['hasPermission'] = true
                  data2['hasPermission'] = true
                }else {
                  data['hasPermission'] = false
                  data2['hasPermission'] = false
                }
                data['permissionId'] = valueColums.slot
                data2['permissionId'] = valueColums.slot
                dataColums.push(data)
                dataColums2.push(data2)
              })

              thisObj.permissionValues.push(dataColums)
              thisObj.permissionValuesTem.push(dataColums2)
            }

          })
        })
      })

    }

    /**
     * 角色权限后端提交
     */
    updateRolePermission () {

      let thisObj = this
      this.$Modal.confirm({
        title: '角色权限修改',
        content: '确认要修改?',
        onOk: () => {
          console.log(this.permissionValues)
          this.$post(updateBatchRolePermissionListUrl,this.permissionValues,{isLayer:true}).then(function (res) {
            //  提交成功刷新列表
            if (res.status) {
              thisObj.isButtonDisable = false
            }
          })
        }
      });

    }

    //===========================================================================公共处理方法================================================================
    /**
     * 处理表头与数据对应的映射关系并返回是否存在
     * @param columnObj  表头数据
     * @param data  比较存在数据
     */
    isExistColumnFormData ( columnObj, data ){
      let jduge = null
      Object.keys(columnObj).forEach(value => {

        if (value===data) {
          jduge = value
        }
      })

      return jduge
    }

    /**
     * 比较两个二维数组里面的对象各属性值是否相等
     */
    equalTwoArray(){

      let jduge = false
      let thisObj = this
      thisObj.permissionValues.forEach((value, index) => {

        value.forEach( (value2,index2)=> {
          Object.keys(thisObj.permissionValuesTem[index][index2]).forEach((key)=>{
              if ( thisObj.permissionValuesTem[index][index2][key] !== thisObj.permissionValues[index][index2][key] ) {
                jduge = true
                return
              }
          })

        })
      })
      thisObj.isButtonDisable = jduge

    }
  }


</script>

<style scoped>

</style>
